<!--执行客户开发计划页面  ————————  客户经理可查看-->
<template>
  <div id="ImplementDevelopmentPlan">
    <div class="breadcrumbs" style="margin: 0px;padding-top: 20px;">
      <ul>
        <li class="home"><a href="index.html" title="Go to Home Page"><strong style="font-size: 18px;">营销管理</strong></a>
          <span>/</span>
        </li>
        <li><strong>客户开发计划</strong><span>/</span></li>
        <li><strong>执行开发计划</strong></li>
      </ul>
    </div>
    <article class="col-main">
      <div class="my-account block block-account" style="padding-left: 20px;">
        <div class="page-title" style="border-bottom: #F1F3F6 1px solid;">
          <h2>执行开发计划</h2>
          <hr>
        </div>
        <div style="margin: 0px 20px 40px 20px">
          <el-radio-group v-model="size">
            <el-radio label="">默认</el-radio>
            <el-radio label="medium">中等</el-radio>
            <el-radio label="small">小型</el-radio>
            <el-radio label="mini">超小</el-radio>
          </el-radio-group>
          <el-descriptions style="margin-top: 20px" class="margin-top" title="" :column="3" :size="size" border>
            <el-descriptions-item>
              <template slot="label">
                销售机会编号
              </template>
              {{salesChance.saleId}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                机会来源
              </template>
              {{salesChance.saleSource}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                客户名称
              </template>
              {{ salesChance.customerName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                成功几率(%)
              </template>
              {{ salesChance.successProbability }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                销售机会概要
              </template>
              {{ salesChance.saleOutline }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
              </template>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                联系人
              </template>
              {{ salesChance.contactsName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                联系人电话
              </template>
              {{ salesChance.contactsTel1 }}
            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label">
                机会描述
              </template>
              {{ salesChance.saleDescribe }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                创建人
              </template>
              {{salesChance.saleCreaterName}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                创建时间
              </template>
              {{salesChance.saleDate}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
              </template>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                指派给
              </template>
              {{salesChance.staffName}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                指派时间
              </template>
              {{salesChance.saleAssignDate}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
              </template>
            </el-descriptions-item>
          </el-descriptions>

        </div>


        <form action="">

          <div style="border-bottom: 2px #555555 solid;margin-right: 20px"></div>
          <div v-if="developmentPlansResultIsNotNull == '' && developmentPlansResultIsNull == ''" class="alert alert-danger" style="margin-top: 20px">
            你还没有计划，请先制定计划！！！
          </div>

          <div>

            <table style="margin: 30px 0px" v-if="developmentPlansResultIsNotNull !=''" class="table">
              <caption class="text-center" style="color: #5CB85C;font-size: 20px">已完成的开发计划</caption>
              <thead>
              <tr>
                <th>编号</th>
                <th>日期</th>
                <th>计划项</th>
                <th>执行情况</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="(item,index) in developmentPlansResultIsNotNull">
                <th scope="row">{{ index+1}}</th>
                <td>{{item.planDate}}</td>
                <td>
                 {{item.planContent}}
                </td>
                <td>
                  {{item.planResult}}
                </td>
              </tr>
              </tbody>
            </table>

            <div style="border-bottom: 2px #555555 solid;margin-right: 20px"></div>

            <table style="margin-top: 30px" v-if="developmentPlansResultIsNull !=''" class="table">
              <caption class="text-center" style="color: red;font-size: 20px">未完成的开发计划</caption>
              <thead>
              <tr>
                <th>日期</th>
                <th>计划项</th>
                <th>执行情况</th>
                <th>操作</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="(item,index) in developmentPlansResultIsNull">
                <td>{{item.planDate}}</td>
                <td>
                  {{item.planContent}}
                </td>
                <td>
                  <input type="text" :id="'PlansReult'+index" class="form-control" placeholder="请输入执行情况" style="width: 300px;">
                </td>
                <td><button v-on:click="savePlanResult(item.planId,index)" class="btn btn-primary">保存</button></td>
              </tr>
              </tbody>
            </table>
          </div>

          <div class="text-center" style="margin-top: 40px;padding-bottom: 30px">
            <button v-show="this.developmentPlansResultIsNotNull != ''" v-on:click="completeDevelopment" class="btn btn-success">开发成功</button>
            <button  @click="open(salesChance.saleId,salesChance.customerName)" class="btn btn-danger">终止开发</button>
            <router-link to="/MemuBar/DevelopmentPlanList" class="btn btn-default">返回</router-link>
          </div>
        </form>

      </div>
    </article>
  </div>
</template>

<script>
export default {
  name: "ImplementDevelopmentPlan",
  data(){
    return{
      salesChance:{},
      developmentPlansResultIsNull:[],
      developmentPlansResultIsNotNull:[],
      newDevelopmentPlan:{
        planId:'',
        planResult:'',
      },
      size: '',
    }
  },
  methods:{
    completeDevelopment(){
      this.$axios.put('/sale/completeDevelopment',this.salesChance).then(
        res=>{
          this.$message({
            showClose: true,
            message:res.data.message,
            type: 'success'
          });
          this.$router.push({path:'/MemuBar/CreateCustomerInfo',query:{
              customerName:this.salesChance.customerName,
              staffName:this.salesChance.staffName,
              staffId:this.salesChance.staffId,
              contactsName:this.salesChance.contactsName,
              contactsTel1:this.salesChance.contactsTel1
            }})
        }
      )
    },
    loadSaleBySaleId(){
      this.$axios.get('/sale/loadSale',{
        params:{
          saleId:this.$route.query.saleId
        }
      }).then(
        res=>{
          this.salesChance=res.data.data
        }
      )
    },
    loadIsNullPlanResultBySaleId(){
      this.$axios.get('/plan/loadIsNullPlanResultBySaleId',{
        params:{
          saleId:this.$route.query.saleId
        }
      }).then(
        res=>{
          this.developmentPlansResultIsNull=res.data.data
        }
      )
    },
    loadNotNullPlanResultBySaleId(){
      this.$axios.get('/plan/loadNotNullPlanResultBySaleId',{
        params:{
          saleId:this.$route.query.saleId
        }
      }).then(
        res=>{
          this.developmentPlansResultIsNotNull=res.data.data
          // console.log(res.data.data)
        }
      )
    },
    savePlanResult(planId,index){
      this.newDevelopmentPlan.planId = planId;
      this.newDevelopmentPlan.planResult = document.getElementById($("input").eq(index+4).attr("id")).value

      if (this.newDevelopmentPlan.planResult == ''){
        this.$message({
          showClose: true,
          message: '销售计划的结果不可为空',
          type: 'error'
        });
        return;
      }else {
        this.$axios.put('/plan/savePlanResult',this.newDevelopmentPlan).then(
          res=>{
            this.$message({
              showClose: true,
              message: res.data.message,
              type: 'success'
            });
            this.$router.go(0)
          }
        )
      }
    },
    open(saleId,customerName) {
      console.log(this.salesChance.saleId)
      this.$confirm('此操作将终止与客户 【'+customerName+'】 相关的销售计划, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        this.$axios.put('/sale/terminationOfDevelopment',this.salesChance).then(
          res=>{
            this.$message({
              type: 'success',
              message: res.data.message
            });
            this.$router.push("/MemuBar/DevelopmentPlanList")
          }
        )
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  },
  created() {
    this.loadSaleBySaleId()
    this.loadIsNullPlanResultBySaleId()
    this.loadNotNullPlanResultBySaleId()
  }
}
</script>

<style scoped>
</style>
